<template>
	<div id="app" >
		<keep-alive >
			<router-view v-if="this.$route.meta.keepAlive"></router-view>
		</keep-alive>
		<router-view v-if="!this.$route.meta.keepAlive"></router-view>
		<!-- tabbar -->
		<van-tabbar v-show="$route.meta.showTabbar" v-model="active" @change="handleTabChange">
			<van-tabbar-item name="home" icon="home-o">外卖</van-tabbar-item>
			<van-tabbar-item name="search" icon="search">搜索</van-tabbar-item>
			<van-tabbar-item name="order" icon="orders-o">订单</van-tabbar-item>
			<van-tabbar-item name="profile" icon="user-circle-o">我的</van-tabbar-item>
		</van-tabbar>

		<!-- 矢量图 -->
		<svg-icon></svg-icon>
  </div>
</template>

<script>
import svg from './components/svg'
export default{
	components:{
		'svg-icon':svg
	},
	data(){
		return {
			active: 'home'
		}
	},
	methods:{
		handleTabChange(name){
			console.log(name);
			this.$router.push({name})
		}
	},
	watch:{
		$route(newRoute){
			this.active = newRoute.name
		}
	}
}
</script>

<style lang="scss">
#app{
	// app-root高度占满全屏
	// height: 100vh; //避免使用100vh, 在ios端高度有点差异
	height: 100%;
}

</style>
